<template>
  <div class="search">
    <div class="doSearch">
      <a-input-search
        v-model:value="searchText"
        placeholder="请输入搜索关键词"
        enter-button="搜索"
        size="large"
        @search="onSearch"
      />
    </div>

    <div class="tabs" style="margin-top: 30px">
      <a-tabs
        direction="vertical"
        v-model:activeKey="activeKey"
        @change="onTabChange"
        animation
      >
        <a-tab-pane key="post" tab="诗词">
          <template #title> 诗词 </template>
          <PostList :post-list="postList" />
        </a-tab-pane>
        <a-tab-pane key="article" tab="博文">
          <template #title> 博文</template>
          <ArticleList :article-list="articleList" />
        </a-tab-pane>
        <a-tab-pane key="picture" tab="图片">
          <template #title> 图片</template>
          <PictureList :picture-list="pictureList" />
        </a-tab-pane>
        <a-tab-pane key="video" tab="视频">
          <template #title> 视频</template>
          视频
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import PostList from "@/views/search/PostList.vue";
import ArticleList from "@/views/search/ArticleList.vue";
import PictureList from "@/views/search/PictureList.vue";
import { useRoute, useRouter } from "vue-router";
import message from "@arco-design/web-vue/es/message";
import { SearchControllerService } from "../../generated";

const images = [
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
];

// 诗词列表
const postList = ref([]);
// 博文列表
const articleList = ref([]);
// 视频列表
// const videoList = ref([]);
// 图片列表
const pictureList = ref([]);
// 搜索建议词列表
const suggestionList = ref([]);

const router = useRouter();
const route = useRoute();
const activeKey = route.params.category;

const searchText = ref(route.query.text || "");

const initSearchParams = {
  type: activeKey,
  text: "",
  pageSize: 30,
  pageNum: 1,
};

const searchParams = ref(initSearchParams);

/**
 * 加载数据
 * @param params
 */

// const loadDataOld = (params: any) => {
//   const postQuery = {
//     ...params,
//     searchText: params.text,
//   };
//   myAxios.post("post/list/page/vo", postQuery).then((res: any) => {
//     postList.value = res.records;
//   });
//
//
//   const pictureQuery = {
//     ...params,
//     searchText: params.text,
//   };
//   myAxios.post("picture/list/page/vo", pictureQuery).then((res: any) => {
//     pictureList.value = res.records;
//   });
// };

const loadData = async (params: any) => {
  console.log("params = " + params);
  const { type = "post" } = params;
  if (!type) {
    message.error("类别为空");
    return;
  }

  const query = {
    ...params,
    // searchText: params.text,
    searchText: params.text,
  };

  const res = await SearchControllerService.searchAllUsingPost(query).then(
    (res: any) => {
      if (res.data) {
        // 搜索到诗词记录
        if (type === "post") {
          postList.value = res.data.dataList;
          // 搜索到图片记录
        } else if (type === "picture") {
          // if (res.dataList !== null) {
          //   pictureList.value = res.dataList.map((picture: any) => {
          //     return {
          //       ...picture,
          //       isVisitable: false,
          //     };
          //   });
          // }
          pictureList.value = res.data.dataList;
          // 搜索到博文记录
        } else if (type === "article") {
          articleList.value = res.data.dataList;
        }
      } else {
        return;
      }
    }
  );

  // myAxios.post("/search/all", query).then((res: any) => {
  //   // 搜索到诗词记录
  //   if (type === "post") {
  //     postList.value = res.dataList;
  //     // 搜索到图片记录
  //   } else if (type === "picture") {
  //     if (res.dataList !== null) {
  //       pictureList.value = res.dataList.map((picture: any) => {
  //         return {
  //           ...picture,
  //           isVisitable: false,
  //         };
  //       });
  //     }
  //     // 搜索到博文记录
  //   } else if (type === "article") {
  //     articleList.value = res.dataList;
  //   }
  // });
};

// 搜索建议
interface Suggest {
  value: string;
}

// 请求获得建议词
const getSuggest = (sug: string): Suggest => {
  return {
    value: sug,
  };
};

// 建议列表
const options = ref<Suggest[]>([]);

// 从建议列表中选择一项
const onSelect = (value: string) => {
  console.log("onSelect", value);
};

// 搜索建议词
const onSearchSuggest = async (suggestText: string) => {
  const res = await SearchControllerService.searchSuggestUsingGet().then(
    (res: any) => {
      // console.log("res = " + res)

      // 搜索建议词不为空
      if (res) {
        suggestionList.value = res;
        console.log("res = " + suggestionList.value);
      }
    }
  );

  options.value = !suggestText
    ? []
    : [
        getSuggest(suggestionList.value[0]),
        getSuggest(suggestionList.value[1]),
        getSuggest(suggestionList.value[2]),
        getSuggest(suggestionList.value[3]),
        getSuggest(suggestionList.value[4]),
      ];
};

// 执行搜索
const onSearch = (searchText: string) => {
  router.push({
    query: {
      ...searchParams.value,
      text: searchText,
    },
  });

  loadData(searchParams.value);
  const type = route.params.category;

  if (type === "post") {
    message.success("成功检索出您感兴趣的诗词~");
  } else if (type === "user") {
    message.success("成功检索出您感兴趣的用户~");
  } else if (type === "picture") {
    pictureList.value = [];
    getImages();
  } else if (type === "article") {
    message.success("成功检索出您感兴趣的博文~");
  }
};

// 花费时间的执行反馈
const getImages = () => {
  // const hide = message.loading("图片正在加载中，需要一点时间~", 0);
  // setTimeout(hide, 4000);
};

// 切换Tab页
const onTabChange = (key: any) => {
  message.success(key);
  router.push({
    path: key,
    query: searchParams.value,
  });
};

// 监听页面 URL 变化
watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: route.query.text,
    type: route.params.category,
  } as any;
  loadData(searchParams.value);
});

// onMounted(() => {
//   router.push({
//     path: "post",
//     query: searchParams.value,
//   });
// });
</script>
